<template>
  <div
    style="text-align: left; padding: 12px 12px 15px; border-bottom: 1px solid var(--el-color-primary-light-7); margin-bottom: 20px;">
    <el-button type="primary" :icon="Plus" />
    <el-button type="danger" :icon="Delete" />
  </div>
  <el-table :data="tableData" border :span-method="objectSpanMethod" highlight-current-row style="width: 100%">
    <el-table-column type="selection" width="50" />
    <el-table-column fixed prop="installNodes" label="安装节点" width="160" />
    <el-table-column label="组件目录" width="300">
      <template #default="scope">
        <div>{{ scope.row.installDir }}/{{ scope.row.componentName }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="组件状态" width="120">
      <template #default="scope">

        <el-text type="success" v-if="scope.row.status == 'running'"><el-icon>
            <Odometer />
          </el-icon> Running</el-text>
        <el-text type="danger" v-else><el-icon>
            <VideoPause />
          </el-icon> Stop</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="serviceName" label="服务" width="120" />
    <el-table-column prop="servicePort" label="端口" width="120" />
    <el-table-column fixed="right" label="操作" min-width="160">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">
          停止
        </el-button>
        <el-button link type="primary" size="small" @click="handleClick">
          启动
        </el-button>
        <el-button link type="primary" size="small" @click="handleClick">
          重启
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { Plus, Delete, Odometer, CircleCheck, VideoPause } from '@element-plus/icons-vue'
import type { TableColumnCtx } from 'element-plus'

const handleClick = () => {
  console.log('click')
}

interface Service {
  installNodes: string
  componentName: string
  componentDesc: string
  status: string
  installDir: string
  serviceName: string
  serviceCount: number
  servicePort: any
}

const tableData: Service[] = [
  {
    installNodes: '192.168.30.11',
    componentName: 'tomcat',
    componentDesc: 'Lite',
    installDir: '/data/dataxone',
    status: 'running',
    serviceName: "DSGWEB",
    serviceCount: 2,
    servicePort: '8080',
  }, {
    installNodes: '192.168.30.11',
    componentName: 'tomcat',
    componentDesc: 'Lite',
    installDir: '/data/dataxone',
    status: 'running',
    serviceName: "permission",
    serviceCount: 2,
    servicePort: '8080',
  },
  {
    installNodes: '192.168.30.12',
    componentName: 'tomcat',
    componentDesc: 'Lite',
    installDir: '/data/dataxone',
    status: 'running',
    serviceName: "DSGWEB",
    serviceCount: 2,
    servicePort: '8080',
  }, {
    installNodes: '192.168.30.12',
    componentName: 'tomcat',
    componentDesc: 'Lite',
    installDir: '/data/dataxone',
    status: 'running',
    serviceName: "permission",
    serviceCount: 2,
    servicePort: '8080',
  },
  {
    installNodes: '192.168.30.11',
    componentName: 'dataxoneTomcat',
    componentDesc: 'Lite',
    installDir: '/data/dataxone',
    status: 'running',
    serviceName: "auto...",
    serviceCount: 1,
    servicePort: '8081',
  },
  {
    installNodes: '192.168.30.12',
    componentName: 'dataxoneTomcat',
    componentDesc: 'Lite',
    installDir: '/data/dataxone',
    status: 'running',
    serviceName: "auto...",
    serviceCount: 1,
    servicePort: '8081',
  }
];


interface SpanMethodProps {
  row: Service
  column: TableColumnCtx<Service>
  rowIndex: number
  columnIndex: number
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {

  if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 6) {
    if (rowIndex % row.serviceCount == 0) {
      return {
        rowspan: row.serviceCount,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }

  }

}

// const selectable = (row: Installer) => row.installNodes.indexOf(" ") > 0

</script>
